<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer">
		<title>电影详情页</title>
		<link rel="stylesheet" type="text/css" href="css/topAndAll.css">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/image.css">
		<link rel="stylesheet" type="text/css" href="css/comment.css">
		<link rel="stylesheet" type="text/css" href="css/comment_other.css">
		<link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
		<!-- 显示他人评论的样式 -->
		<link rel="stylesheet" type="text/css" href="css/score.css">
		<!-- 显示评分统计的样式 -->
		<link rel="stylesheet" type="text/css" href="css/pictureViewer.css">
		<!-- 观看图片样式，一个小插件 -->
		<link rel="stylesheet" type="text/css" href="css/star.css">
		<!-- 评分星星样式，一个小插件 -->
		<link rel="stylesheet" type="text/css" href="css/buttons.css">
		<!-- 按钮样式，一个小插件 -->
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<!-- 下面的JS插件都需要读取jquery -->
		<script src="js/other.js"></script>
		<script src="js/pictureViewer.js"></script>
		<script src="js/jquery.mousewheel.min.js"></script>
		<script src="js/star.js"></script>
		<script src="js/ejs.min.js"></script>
	</head>
	<body style="overflow: visible;">
		<div id="top">
			<!-- 导航栏 -->
			<div id="daohang">
				<a href="javascript:login()">登录</a>
				<a href="../zgp/register.html">注册</a>
				<a href="../zzy/homepage.html">回到主页</a>
			</div>
			<!-- 搜索栏 -->
			<div id="search">
				<form action="../zgp/find4yfj.html" method="get">
					<a href="../zzy/homepage.html" style="left: 25%;top: 20px;font-size: 25px;color: #007722;">酷睿影评</a>
					<input type="text" name="movie_name" id="search_text" placeholder="您想搜索的电影名" maxlength="60" />
					<input type="submit" value="搜索" name="submit" id="search_button" />
				</form>
			</div>
		</div>
		<div id="main">
			<!-- 这里将会显示从数据库获得的电影基本信息 -->
		</div>
		
		
		
		<!-- 评论弹出的内容框 -->
		<div id="comment_main">
			<!-- 这是被隐藏的弹出评论框 -->
			<span id="closeBtn" class="close">×</span>
			<!-- 星级评价 -->
			<div id="score">
				<span id="score_title">你给出的电影评分</span>
				<ul id="rating" class="rating">
					<li class="rating-item" id="score_2" title="烂片"></li>
					<li class="rating-item" id="score_4" title="不行"></li>
					<li class="rating-item" id="score_6" title="尚可"></li>
					<li class="rating-item" id="score_8" title="推荐"></li>
					<li class="rating-item" id="score_10" title="力荐"></li>
				</ul>
			</div>
			<div id="comment_content">
				<textarea id="comment_text" placeholder="输入你想说的话吧 :)"></textarea>
				<!-- 限制评论字数的 -->
				<span style="top: 50px;"><span id="text-count">0</span>/250</span></div>
			<a href="javascript:fabiao()" class="button button-glow button-rounded button-raised button-primary" id="report_button">发表评论</a>
		</div>

		<div id="image">
			<!-- 这里将会显示从数据库获得的电影图片 -->
		</div>
		
		<div id="comment_other_title">
			评论· · · · · ·
		</div>
		<div id="comment_other_sort" style="top: 10px;">
			<a href="javascript:orderByTime()" id="orderNew">最新</a>&nbsp &nbsp
			<a href="javascript:orderByZan()" id="orderHot">最热</a>
		</div>
		<div id="comment_other">
			<!-- 这里将会显示从数据库获得的评论信息 -->
			<div style="top: 50px;margin: 0 auto;font-size: 40px;">暂时还没人评论，快抢个沙发吧</div>
		</div>
		
		<div id="warning_box">
			<span id="closeBtn4Warning" class="close">×</span>
			<!-- 这里是警告框 -->
			<img src="img/warning.png" style="position: absolute;left: 82px;top: 70px;">
			<div id="warning_text" style="position: absolute;top: 220px;left: 65px;font-size: 23px;color: red;"></div>
			<span style="left: 65px;top: 20px; font-size: 40px;">不好意思</span><br>
			
		</div>
		
		<div id="prompt_box">
			<!-- 这里是评论成功提示框 -->
			<img src="img/prompt.png" style="position: absolute;left: 85px;top: 50px;">
			<a href="javascript:location.reload()" style="top: 200px;left: 75px;" class="button button-3d button-action button-pill">评论成功!</a>
		</div>
		
		<div id="login_box">
			<!-- 这里是登录框 -->
			<span id="closeBtn4Login" class="close">×</span>
			<h1 style="top: 20px;left: 65px;">欢迎来到酷睿影评~</h1>
			<img src="img/login.png" style="top: 50px;left: 133px;">
			<form action="#" method="post" id="login4detail">
				<input type="text" placeholder="请输入用户名" id="user_name" name="username"/>
				<input type="password" placeholder="请输入密码" id="user_password" name="password" />
				 <a href="javascript:login_check()" class="button button-3d button-action button-pill" style="top: 125px;right: 75px;">GO!</a>
			</form>
		</div>
		
		
		
		<!------------------------------------------------------以下是JS部分---------------------------------------------------->

		<script type="text/javascript">
						// 看图片的js
			$(function() {
				document.addEventListener('imageEvent', function() {
					$('.image-list').on('click', '.cover', function() {
						var this_ = $(this);
						var images = this_.parents('.image-list').find('.cover');
						var imagesArr = new Array();
						$.each(images, function(i, image) {
							imagesArr.push($(image).children('img').attr('src'));
						});
						$.pictureViewer({
							images: imagesArr, //需要查看的图片，数据类型为数组
							initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
							scrollSwitch: true //是否使用鼠标滚轮切换图片
						});
					});
				})
			});
		</script>
		
		<script>
			//评分点亮星星的js
			$('#rating').star({
				mode: 'LightEntire', //整颗星
				num: 0,//默认星星数量
			});
		</script>
		
		<script type="text/javascript">
			// 字数限制
			$("#comment_text").on("input propertychange", function() {
				var $this = $(this),
					_val = $this.val(),
					count = "";
				if (_val.length > 250) {
					$this.val(_val.substring(0, 250));
				}
				count = $this.val().length;
				$("#text-count").text(count);
			});
		</script>
		
		<script id="main_temp" type="text/template">
			<h1 id="title"><%=movie[0].movie_name%></h1>
			<div><img id="title_img" src="<%=movie[0].movie_cover%>"></div>
			<!-- 电影信息 -->
			<div id="info">
				<span>导演:</span><span class="info_content"><%=movie[0].movie_director%></span><br />
				<span>编剧:</span><span class="info_content"><%=movie[0].movie_writer%></span><br />
				<span>演员:</span><span class="info_content"><%=movie[0].movie_actor%></span><br />
				<span>类型:</span><span class="info_content"><%=movie[0].movie_type%></span><br />
				<span>制作国家/地区:</span><span class="info_content"><%=movie[0].movie_region%></span><br />
				<span>语言:</span><span class="info_content"><%=movie[0].movie_lang%></span><br />
				<span>上映日期:</span><span class="info_content"><%=timestampToTime(movie[0].movie_date)%></span><br />
				<span>集数:</span><span class="info_content"><%=judge_movie(movie[0].jishu)%></span><br />
				<span>片长:</span><span class="info_content"><%=movie[0].movie_length%></span><br />
				<span>别名:</span><span class="info_content"><%=movie[0].movie_alias%></span>
			</div>
			<div id="scoreAndComment">
				<!-- 评分统计 -->
				<div id="score_stat">
					<h2 style="text-align: center;">酷睿评分:<span id="score_stat_number"><%=decimal(movie[0].avg)%></span></h2>
						<p>总评人数:<span id="comment_amount"><%=movie[0].all_num%></span></p>
						<p>5星人数:<span><%=percent(movie[0].ten_num,movie[0].all_num)%></span></p>
						<p>4星人数:<span><%=percent(movie[0].eight_num,movie[0].all_num)%></span></p>
						<p>3星人数:<span><%=percent(movie[0].six_num,movie[0].all_num)%></span></p>
						<p>2星人数:<span><%=percent(movie[0].four_num,movie[0].all_num)%></span></p>
						<p>1星人数:<span><%=percent(movie[0].two_num,movie[0].all_num)%></span></p>
				</div>
				<!-- 评论及评分 -->
				<div id="comment">
					<span>人们说分享看法是一种美德哦:)</span>
					<br>
					<a class="button button-3d button-primary button-rounded" id="comment_button">我要评论</a>
				</div>
			</div>
			<!-- 简介 -->
				<div id="introduction_title">剧情简介· · · · · ·</div><br />
				<div id="introduction_content">
					<%=movie[0].movie_juqing%>
				</div>
		</script>
		
		<script type="text/javascript">
			window.onload=getInfo();
			
			function getInfo(){
			var data = null;
			
			fetch('/CoolReal/movie?id='+get_args()['id'])
			.then(function(res) {
				return res.json();
			}).then(function(data) {
				if (!data) {
					return;
				}
				var temp = document.getElementById('main_temp');
				var html = ejs.render(temp.innerHTML, {movie: data});
				var main = document.getElementById('main');
				main.innerHTML = html;
				
				var evt = document.createEvent("HTMLEvents");
				// 创建
				evt.initEvent("commitEvent", false, false);
				// 初始化
				document.dispatchEvent(evt);
				
				var comNum = document.getElementById("comment_amount").innerHTML;
				var com = document.getElementById("score_stat");
				var content=` <div style="margin:25px ;font-size:30px; top:45px">暂时还没人评分，来做伯乐吧</div>`
				if(comNum==0){
					com.innerHTML=content;
				}
			});
				}
		</script>
	
		<script id="image_temp" type="text/template">
		<!-- 电影截图 -->
			<div id="image-title">图片 · · · · · ·</div>
			<div class="image-list">
				<div class="cover"><img src="<%=picture[0].picture_path%>" alt=""></div>
				<div class="cover"><img src="<%=picture[1].picture_path%>" alt=""></div>
				<div class="cover"><img src="<%=picture[2].picture_path%>" alt=""></div>
				<div class="cover"><img src="<%=picture[3].picture_path%>" alt=""></div>
				<div class="cover"><img src="<%=picture[4].picture_path%>" alt=""></div>
				<div class="cover"><img src="<%=picture[5].picture_path%>" alt=""></div>
			</div>
		</script>
		<script type="text/javascript">
			var data = null;
			
			fetch('/CoolReal/picture?id='+get_args()['id'])
			.then(function(res) {
				return res.json();
			}).then(function(data) {
				if (!data) {
					return;
				}
				var temp = document.getElementById('image_temp');
				var html = ejs.render(temp.innerHTML, {picture: data});
				var iamge = document.getElementById('image');
				image.innerHTML = html;
				
				var evt = document.createEvent("HTMLEvents");
				// 创建
				evt.initEvent("imageEvent", false, false);
				// 初始化
				document.dispatchEvent(evt);
			});
		</script>
		
		<script id="comment_other_bytime_temp" type="text/template">
		<% for(var i in commentOther.commentInfo){ %>
		<div class="comment_div" style="min-height: 90px;">
		<div class="comment_span" style="color: skyblue;width: 110px;float: left;"><%=commentOther.userInfo[i].user_name%></div><span class="comment_span"><%=scoreToStar(commentOther.movieScore[i].score)%></span>
		<span class="comment_span" style="color: #AAAAAA;"><%=timestampToTime(commentOther.commentInfo[i].comment_time)%></span><span  class="comment_span">热度:<span class="comment_span"><%=commentOther.commentInfo[i].comment_zan%></span></span>
		<a href="javascript:dianzhanByTime(<%=i%>)" class="button button-3d button-action button-circle button-jumbo" style="float: right;" ><i class="fa fa-thumbs-up"></i></a>
		<p><%=commentOther.commentInfo[i].comment_content%></p>
		<span hidden="hidden" id="comment_other<%=i%>"><%=commentOther.commentInfo[i].comment_id%></span>
		</div>
		<% } %>
		</script>
		
		<script type="text/javascript">
			window.onload=orderByTime();
			// 默认加载最新的评论排序
			function orderByTime(){
				// debugger;
				var data = null;
				var ordernew = document.getElementById('orderNew');
				var orderhot = document.getElementById('orderHot');
				var none=document.getElementById("none_comment");
				
				
				fetch('/CoolReal/comTime?id='+get_args()['id'])
				.then(function(res) {
					return res.json();
				}).then(function(data) {
					if (data.commentInfo.length==0) {
						return;
					}
					var temp = document.getElementById('comment_other_bytime_temp');
					var html = ejs.render(temp.innerHTML, {commentOther: data});
					var comment_other = document.getElementById('comment_other');
					comment_other.innerHTML = html;
					ordernew.style.color='black';
					orderhot.style.color='#007722';
					// 点击不同的排序,显示不同的颜色
				});
			}
		</script>
		
		<script id="comment_other_byzan_temp" type="text/template">
		<% for(var i in commentOther.commentInfo){ %>
		<div class="comment_div" style="min-height: 90px;">
		<span class="comment_span" style="color: skyblue;width: 110px;float: left;"><%=commentOther.userInfo[i].user_name%></span><span class="comment_span"><%=scoreToStar(commentOther.movieScore[i].score)%></span>
		<span class="comment_span" style="color: #AAAAAA;"><%=timestampToTime(commentOther.commentInfo[i].comment_time)%></span><span  class="comment_span">热度:<span class="comment_span"><%=commentOther.commentInfo[i].comment_zan%></span></span>
		<a href="javascript:dianzhanByZan(<%=i%>)" class="button button-3d button-action button-circle button-jumbo" style="float: right;" ><i class="fa fa-thumbs-up"></i></a>
		<p><%=commentOther.commentInfo[i].comment_content%></p>
		<span hidden="hidden" id="comment_other<%=i%>"><%=commentOther.commentInfo[i].comment_id%></span>
		</div>
		<% } %>
		</script>
		
		<script type="text/javascript">
			function orderByZan(){
				var data = null;
				var ordernew = document.getElementById('orderNew');
				var orderhot = document.getElementById('orderHot');
				
				fetch('/CoolReal/comZan?id='+get_args()['id'])
				.then(function(res) {
					return res.json();
				}).then(function(data) {
					if (data.commentInfo.length==0) {
						return;
					}
					var temp = document.getElementById('comment_other_byzan_temp');
					var html = ejs.render(temp.innerHTML, {commentOther: data});
					var comment_other = document.getElementById('comment_other');
					comment_other.innerHTML = html;
					ordernew.style.color='#007722';
					orderhot.style.color='black';
					// 点击不同的排序,显示不同的颜色
				});
			}
		</script>
		
		<script id="login_validate_temp" type="text/template">
			<a  href="../zgp/modify.html"><%=session_data.user_name%></a>
			<a href="javascript:quit()">注销</a>
			<a href="../zzy/homepage.html">回到主页</a>
			<span id="user_id" hidden="hidden"><%=session_data.user_id%></span>
		</script>
		
		<script type="text/javascript">
			// var data = null;
			
// 			fetch('/CoolReal/add_comment')
// 			.then(function (res){
// 				return res.json();
// 				}).then(function (data) {
// 					if(!data){
// 						return;
// 					}
					
					var session_data = sessionStorage.getItem('currentUser');
					if(session_data){
						session_data=JSON.parse(session_data);
					}
					if(!session_data)
						session_data={session_username:""}
					if(session_data.session_username!=""){
						var temp = document.getElementById('login_validate_temp');
						var html = ejs.render(temp.innerHTML, data);
						var daohang = document.getElementById('daohang');
						daohang.innerHTML=html;
						console.log(data);

						var uid = session_data.user_id;
						var mid = get_args()["id"];
						var div = document.getElementById("score");
						var content=`<h1 style="margin:0 auto;top:20px;">你已经评分了，不可重复评分，但可以评论哦</h1>`
						var s={};
						s["user_id"]=uid;
						s["movie_id"]=mid;
						
						fetch('/CoolReal/sfpf', {
							method: 'POST',
							body:Object.keys(s).map(el=>`${el}=${s[el]}`).join('&'),
							headers: {
								"Content-type": "application/x-www-form-urlencoded; charset=utf-8"
							}
						})
						.then(function (rrr) {
						console.log(rrr);	
						return rrr.json();
						}).then(function (aaa) {
							console.log(aaa);
							if(aaa!=0){
								div.innerHTML=content;
							}else{
								return;
							}
						});
					}
		</script>

	</body>
</html>
